<template>
  <div class="dynamic">
    <vue-seamless-scroll :data="dynamicList" class="dynamic-warp" :class-option="optionSetting">
      <div class="dynamic-list" v-for="item in dynamicList" :key="item.name">
        <div class="dynamic-list-right">
          <p class="dynamic-list-right-top">
            <span>{{item.name}}</span>
            <span>{{item.type}}</span>
            <span>{{item.msg}}</span>
          </p>
          <p class="dynamic-list-right-bottom">{{item.time}}</p>
        </div>
      </div>
    </vue-seamless-scroll>
  </div>
</template>

<script>
// 滚动样式详见: https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default
export default {
  data() {
    return {
      dynamicList: [
        {
          name: "小张",
          type: "17608135555",
       
        },
        {
          name: "小李",
          type: "17608135555",
        },
        {
          name: "小王",
           type: "17608135555",
        },
        {
          name: "小林",
            type: "17608135555",
        },
        {
          name: "小时",
           type: "17608135555",
        },
        {
          name: "小七",
            type: "17608135555",
        },
        {
          name: "小齐",
          type: "17608135555",
        },
        {
          name: "小新",
          type: "17608135555",
        },
        {
          name: "小金",
           type: "17608135555",
        },
        {
          name: "小毛",
           type: "17608135555",
        },
      ],
    };
  },
  methods: {},
  computed: {
    optionSetting() {
      return {
        step: 1,
      };
    },
  },
  watch: {},
  created() {},
  mounted() {},
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {},
};
</script>

<style scoped>
.dynamic {
  width: 200px;
  /* height: auto; */
}
.dynamic-warp {
  height: 500px;
  overflow: hidden;
}
.dynamic-list {
  width: 200px;
  height: 50px;
  /* line-height: 50px; */
  /* padding: -50px 0; */
    line-height: 25px;
  border-bottom: 1px solid #dcdfe6;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.dynamic-list:hover {
  background: #dbfefb;
}
.dynamic-list-left,
.dynamic-list-left img {
  width: 42px;
  height: 42px;
  border-radius: 21px;
  overflow: hidden;
  margin-right: 25px;
}
.dynamic-list-right {
    width: 200px;
  flex: 1;
  height: 42px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.dynamic-list-right .dynamic-list-right-top {
  font-size: 20px;
}
.dynamic-list-right-top span:nth-child(1) {
  color: #8e9b9b;
  margin-right: 15px;
}
.dynamic-list-right-top span:nth-child(2) {
  color: #dcdfe2;
  margin-right: 5px;
}
.dynamic-list-right-top span:nth-child(3) {
  color: #2e93fd;
}
.dynamic-list-right-bottom {
  color: #999999;
  font-size: 16px;
}
</style>